<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-position="top" :error-type="['toast']">
			<u-form-item label="宝宝">
				<view class="children-view">
					<children-list-view :addShow="addShow()" @showClasses="showClasses" :childrenList="childrenList"
						@itemClick="childrenItemClick"></children-list-view>
				</view>
			</u-form-item>
			<u-form-item label="检表类型" prop="typeName">
				<u-input type="select" placeholder="请选择类型" v-model="typeName" @click="typeShow = true" />
			</u-form-item>
			<u-form-item label="月龄" prop="developName">
				<u-input type="select" placeholder="请选择月龄" v-model="form.developName" @click="timeShow = true" />
			</u-form-item>
			<u-form-item label="检表" prop="remarks">
				<u-checkbox-group>
					<view v-for="(item, index) in developReviewList" :key="index" class="item">
						<view v-if="titleVisible(index)" class="item-title-view">
							<view class="item-title-top"></view>
							<view class="item-title">{{item.name}}</view>
						</view>
						<view class="check-item">
<!-- 							<u-checkbox
								v-model="item.checked"
								:name="item.target">
								{{item.target}}
							</u-checkbox> -->
							<view class="content">
								<view>{{item.target}}</view>
								<u-icon name="question-circle" @click="questionClick(index)"></u-icon>
							</view>
							<u-subsection :list="checkList" :current="item.checked" @change="subsectionChange(index, $event)"></u-subsection>
						</view>
					</view>
				</u-checkbox-group>
			</u-form-item>
			<u-form-item label="简述" prop="remarks">
				<u-input v-model="form.remarks" type="textarea"/>
			</u-form-item>
		</u-form>
		<u-button class="action-view" @click="saveClick">保存</u-button>
		<u-select v-model="timeShow" :list="list" @confirm="confirmTime" label-name="name" value-name="id"></u-select>
		<children-select-view ref="popupConpare" @confirm="confirm"></children-select-view>
		<u-select v-model="typeShow" :list="typeList" @confirm="confirmType"></u-select>
	</view>
</template>

<script>
	import ChildrenListView from '@/components/children-list-view.vue'
	import ChildrenSelectView from '@/components/children-select-view.vue'
	import {
		formatDateByTimestamp
	} from '@/utils/utils.js'
	import recordMixin from './mixins/index.js'
	import { addDevelopReview, getDevelopReviewByMonth, getDevelopReviewMonthList } from './api/growth.js'
	export default {
		mixins: [recordMixin],
		components: {
			ChildrenListView,
			ChildrenSelectView
		},
		data() {
			return {
				form: {
					developId: '',
					developName: '',
					remarks: ''
				},
				rules: {
					developId: [{
						required: true,
						message: '请选择月龄',
					}, ],
					remarks: [{
						required: true,
						message: '请填写简述',
					}, ],
				},
				developReviewList: [],
				
				timeShow: false,
				list: [],
				
				checkList: [
					{
						name: '未达成'
					}, 
					{
						name: '已达到'
					}, 
					{
						name: '发展中'
					}
				],
				current: 1,
				
				typeName: '',
				typeShow: false,
				typeList: [
					{
						value: '0',
						label: '机构端'
					},
					{
						value: '1',
						label: '家庭端'
					},
					{
						value: '2',
						label: '小群体课程'
					}
					
				],
				
				titleVisible(index) {
					if (index > 0){
						let now = this.developReviewList[index].name;
						let last = this.developReviewList[index-1].name;
						if (now === last){
							return false;
						}
					}
					return true;
				},
			}
		},
		onLoad() {

		},
		methods: {
			
			addRecord() {
				if (this.developReviewList.length === 0) {
					this.$u.toast('没有检表数据');
					return
				}

				let childIds = '';
				let classIds = '';
				for (let index in this.childrenList) {
					let item = this.childrenList[index];
					childIds += `,${item.id}`;
					classIds += `,${item.classesId}`;
				}
				if (childIds.length > 0) {
					childIds = childIds.substring(1);
					classIds = classIds.substring(1);
				}
				if (!this.$u.test.isEmpty(this.recordId)) {
					this.form.id = this.recordId
					this.form.childrenIds = childIds
				}else {
					this.form.childrenIds = childIds
				}
				this.form.classIds = classIds;
				this.developReviewList.forEach((x, index) => {
					this.form[`list[${index}].developItemId`] = x.id;
					this.form[`list[${index}].states`] = x.checked;
				})
				console.log(this.form)
				addDevelopReview(this.form).then(res => {
					this.$u.toast('添加成功');
					setTimeout(function(){
						uni.navigateBack({delta:1})
					},1000)
				})
			},
			
			questionClick(index) {
				const details = this.developReviewList[index].details
				uni.showModal({
					title: '提示',
					content: details,
					showCancel: false,
					success: function (res) {
					}
				});
			},

			confirmTime(res) {
				console.log(res)
				if (res.length > 0) {
					this.form.developId = res[0].value;
					this.form.developName = res[0].label;
					this.getMonth(res[0].value)
				}
			},
			
			confirmType(res) {
				console.log(res)
				if (res.length > 0) {
					this.typeName = res[0].label;
					this.getMonthList(res[0].value);
				}
			},
			
			getMonth(developId) {
				getDevelopReviewByMonth({developId}).then(res => {
					console.log(res);
					this.developReviewList = res.data.map(x => {
						x.checked = 1;
						return x;
					});
				})
			},
			
			getMonthList(value) {
				getDevelopReviewMonthList({type: value}).then(res => {
					console.log(res);
					this.list = res.data
				})
			},
			
			getRecord() {
			},
			
			subsectionChange(index, res) {
				this.developReviewList[index].checked = res
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss">
	@import '@/css/u-form.scss';
	
	.container {
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.children-view {
		width: 10rpx;
		flex: 1;
		display: flex;
		flex-direction: row;
	}

	.action-view1 {
		margin-top: 160rpx;
	}

	.item{
		width: 100%;
		
		.item-title-view{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 20rpx;
			
			.item-title-top{
				width:10px;
				height:15px;
				background:rgba(250,203,47,1);
				opacity:1;
			}
			
			.item-title{
				font-size:30rpx;
				font-weight:bold;
				color:rgba(34,34,34,1);
				opacity:1;
				margin-left: 10rpx;
			}
		}

		.check-item{
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			margin-bottom: 20rpx;
			
			.content{
				display: flex;
				flex-direction: row;
			}
		}
	}
</style>
